<template>
  <view
    flex
    justify-around
    items-center
    w-screen
    overflow-hidden
    relative
    :style="{ height: pageHeight + 'px' }"
  >
    <swiper
      :current="swiperPage"
      circular
      :indicator-dots="false"
      :autoplay="false"
      :duration="300"
      w-screen
      h-full
      @change="changeSwiper"
    >
      <swiper-item v-for="(item, index) in result" :key="item">
        <image mode="aspectFill" w-screen h-full :src="item" />
      </swiper-item>
    </swiper>
    <!-- <nut-swiper
      :pagination-visible="false"
      :loop="true"
      ref="swiper"
      auto-play="0"
      @change="changeSwiper"
    >
      <nut-swiper-item v-for="(item, index) in result" :key="item">
        <img w-screen h-500rpx :src="item" />
      </nut-swiper-item>
    </nut-swiper> -->
    <view
      flex
      absolute
      w-670rpx
      h-100rpx
      top-20rpx
      rounded-full
      items-center
      bg="#fff"
      px-14rpx
      box-border
    >
      <view
        flex
        w-full
        h-100rpx
        rounded-full
        items-center
        bg="#fff"
        overflow-x-auto
      >
        <view
          v-for="item in areas"
          class="tab"
          shrink-0
          px-36rpx
          py-18rpx
          rounded-40rpx
          text="#000"
          text-28rpx
          :class="{ active: item.areaId === queryParams.areaId }"
          @click="switchArea(item.areaId)"
        >
          {{ item.areaName }}
        </view>
      </view>
    </view>
    <view
      flex
      flex-col
      absolute
      w-80rpx
      left-40rpx
      rounded-full
      items-center
      bg="#fff"
      py-14rpx
      box-border
    >
      <view
        grid
        grid-cols-1
        gap-20rpx
        place-items-center
        w-80rpx
        rounded-full
        items-center
        bg="#fff"
        overflow-x-auto
      >
        <view
          v-for="item in floors"
          class="tab"
          flex
          justify-center
          items-center
          shrink-0
          w-60rpx
          h-60rpx
          rounded-full
          text="#000"
          text-28rpx
          :class="{ active: item.floorId === queryParams.floorId }"
          @click="switchFloor(item.floorId)"
        >
          {{ item.floorName }}
        </view>
      </view>
    </view>
    <view
      flex
      justify-around
      items-center
      absolute
      w-570rpx
      h-110rpx
      bottom-56rpx
      rounded-full
      bg="#fff"
      px-14rpx
      box-border
    >
      <view
        bg="#FCC300"
        w-400rpx
        h-80rpx
        rounded-full
        flex
        justify-between
        items-center
      >
        <view
          flex
          justify-center
          items-center
          w-80rpx
          h-80rpx
          @click="handlePrev"
        >
          <image
            mode="aspectFill"
            w-18rpx
            h-30rpx
            src="@/pages/funcPages/static/guide/left.png"
          ></image>
        </view>
        <view text-32rpx font-500 text="#000">
          推荐路线({{ swiperPage + 1 }}/{{ result.length }})
        </view>
        <view
          flex
          justify-center
          items-center
          w-80rpx
          h-80rpx
          @click="handleNext"
        >
          <image
            w-18rpx
            h-30rpx
            src="@/pages/funcPages/static/guide/right.png"
          />
        </view>
      </view>
      <view
        w110rpx
        h-80rpx
        rounded-full
        bg="#FCC300"
        rounded-40rpx
        flex
        justify-center
        items-center
        text="#fff"
        text-36rpx
        font-800
        @click="toVr"
      >
        VR
      </view>
    </view>
  </view>
  <tabbar></tabbar>
</template>

<script setup lang="ts">
import { getAllArea, getAllFloor, getVenueContent } from '@/api/venue'
import { onLoad } from '@dcloudio/uni-app'
import { selectVrShow } from '@/api/vr'
const result = ref<Array<string>>([])
import { useTabbarStore } from '@/store'
const tabbarStore = useTabbarStore()
const tabbarList = tabbarStore.tabbarList.map((i) => i.linkUrl)
const curPageIsHaveTab = ref(false)


const isShowVr = ref<any>({}) // {vrShowList: 0, vrId: 89}
const pageHeight = ref(1000)
const swiperPage = ref<number>(0)
const swiper = ref<any>(null)
const queryParams = ref<{
  areaId: number
  floorId: number
}>({
  areaId: 0,
  floorId: 0
})
// 楼层数组
const floors = ref<Array<{ floorId: number; floorName: string }>>([
  { floorId: 101, floorName: 'F1' },
  { floorId: 102, floorName: 'F2' },
  { floorId: 103, floorName: 'F3' }
])

// 区域数组
const areas = ref<Array<{ areaId: number; areaName: string }>>([
  { areaId: 201, areaName: '体感区' },
  { areaId: 202, areaName: '新时代' },
  { areaId: 203, areaName: '重温1980' }
])
function changeSwiper(e: any) {
  swiperPage.value = e.detail.current
}
function switchArea(areaId: number) {
  if (areaId !== queryParams.value.areaId) {
    queryParams.value.areaId = areaId
  }

  queryParams.value.areaId = areaId
  getList()
}
function switchFloor(floorId: number) {
  if (floorId !== queryParams.value.floorId) {
    queryParams.value.floorId = floorId
    getList()
  }
}

const handlePrev = () => {
  // swiper.value.prev()
  if (swiperPage.value == 0) {
    swiperPage.value = result.value.length - 1
  } else {
    swiperPage.value--
  }
}
const handleNext = () => {
  // swiper.value.next()
  if (swiperPage.value == result.value.length - 1) {
    swiperPage.value = 0
  } else {
    swiperPage.value++
  }
}

function getList() {
  getVenueContent(queryParams.value).then((res: any) => {
    result.value = []
    swiperPage.value = 0
    result.value = res.data.result.map((i: any) => i.img)
  })
}
async function init() {
  Promise.all([getAllArea(), getAllFloor()])
    .then((responses) =>
      Promise.all(
        responses.map((res) => {
          return res?.data?.result || []
        })
      )
    )
    .then((results) => {
      areas.value = results[0].map((i: any) => ({
        areaId: i.areaId,
        areaName: i.areaName
      }))
      queryParams.value.areaId = areas.value[0].areaId

      floors.value = results[1].map((i: any) => ({
        floorId: i.floorId,
        floorName: i.floorName
      }))
      queryParams.value.floorId = floors.value[0].floorId
      getList()
    })
}
function getVrShow() {
  selectVrShow().then((res: any) => {
    isShowVr.value = res.data.result
  })
}
function toVr() {
  if (isShowVr.value.vrShowList == 1) { // 有列表
    uni.navigateTo({
      url: '/pages/funcPages/vr/vrList'
    })
  } else {
    uni.navigateTo({
      url: '/pages/funcPages/vr/vr?id=' + isShowVr.value.vrId
    })
  }
}
onMounted(() => {
  init()
  
  getVrShow()
  
})
onLoad(() => {
  const systemInfo: any = uni.getWindowInfo()
  console.log('systemInfo: ' + JSON.stringify(systemInfo))
  const pages = getCurrentPages() // 获取当前页面栈
  const currentPage = pages[pages.length - 1] // 当前页面
  const currentPath = `/${currentPage.route}` // 获取当前页面路径
  curPageIsHaveTab.value = tabbarList.includes(currentPath)
  pageHeight.value = curPageIsHaveTab.value
    ? Math.min(systemInfo.safeArea.height, systemInfo.windowHeight) - (systemInfo.screenWidth / 750)*120 - (systemInfo.safeArea.height < systemInfo.windowHeight ? 40 :0)
    : Math.min(systemInfo.safeArea.height, systemInfo.windowHeight) - (systemInfo.safeArea.height < systemInfo.windowHeight ? 40 :0) 

  if (tabbarStore.activeTabName && curPageIsHaveTab.value) {
    uni.setNavigationBarTitle({
      title: tabbarStore.activeTabName
    })
  }
})
</script>
<style>
page {
  height: 100%;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
<style scoped>
/* 一行两列的样式 */
.row-1-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28rpx;
}
.tab {
  background: white;
  transition: background-color 0.4s ease;
}
.active {
  background-color: #fcc300;
}
</style>
